<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <button @click="changMessage">修改message</button>
    </div>

    <script src="./lib/Vue.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return{
                  message:"Hello Vue",//监听数据
                  info:{ name: "why", age: 18 }//监听数据
                }
            },
            methods: {
              changMessage() {
                this.message = "你好啊，李银河！"
                this.info = { name: "kobe" }
              }
            },
            watch: {
              // 1.默认有两个参数：newValue/oldVaule 新的值/旧的值
              message(newValue, oldValue) {//监听数据是否发生变化
                console.log("message数据发了变化", newValue, oldValue);
              },
              // 2.如果是对象，这两个参数返回的是proxy（代理对象）
              info(newValue, oldValue) {
                // console.log("info数据发生了变化",newValue, oldValue);

                // 3.获取原生对象(如果觉得proxy看起来不方便可以获取原生对象)
                console.log({ ...newValue });//方法一
                console.log(Vue.toRaw(newValue));//方法二  vue专门获取原生对象的方法toRaw
              }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>